<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>非受控组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//何为非受控组件？——— 组件中输入类DOM的值，在使用时：是通过节点获取输入的，而不是从state中读取的。（现用现找节点取）

			//定义组件
			class Login extends React.Component{
				render(){
					return(
						<form onSubmit={this.login}>
							用户名 <input ref={c=>this.username=c} type="text"/>	
							密码 <input ref={c=>this.password=c} type="password"/>	
							<button>登录</button>
						</form>
					)
				}
				login = (e)=>{
					e.preventDefault(); //阻止表单提交后跳转
					const {username,password} = this
					alert(`用户名是：${username.value}，密码是${password.value}`)
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('test'))
		</script>
	</body>
</html>
